<template>
	<view class="wrap">
    <u-swiper :list="banner" height="500"></u-swiper>
    <view class="bgff paddLR box1 u-p-t-26 u-p-b-26">
      <view class="u-font-32 b u-m-b-10">整租<text class="u-m-l-10 u-m-r-10">|</text>拓基城市广场 1室1厅1卫</view>
      <view class="price">
        <text class="b u-font-36 u-error">2300</text>
        <text class="b u-error">元/月</text>
        <text class="u-999 u-m-l-10">押一付三</text>
      </view>
      <view class="line"></view>
      <view class="info u-flex u-row-between u-text-center">
        <view class="item">
          <view>1室1厅1卫</view>
          <text class="u-font-20 u-999">房型</text>
        </view>
        <view class="line2"></view>
        <view class="item">
          <view>58.04㎡</view>
          <text class="u-font-20 u-999">面积</text>
        </view>
        <view class="line2"></view>
        <view class="item">
          <view>高/18层</view>
          <text class="u-font-20 u-999">楼层</text>
        </view>
        <view class="line2"></view>
        <view class="item">
          <view>西</view>
          <text class="u-font-20 u-999">朝向</text>
        </view>
      </view>
      <view class="line"></view>
      <view class="labs u-flex u-col-center u-m-b-20">
        <view v-for="labItem in 3" class="labItem u-primary">邻地铁</view>
      </view>
      <view class="u-999 u-font-24">1分钟前更新房源信息</view>
    </view>
    <view class="bgff paddLR box2">
      <view class="tit4 b">脱机广场</view>
      <view class="map"></view>
      <view class="dt-list">
        <view v-for="item in 4" class="item u-flex u-m-b-4 u-666">
          <image src="./icon/z-dt.svg" mode="" style="width: 20px; height: 20px;"></image>
          <view class="text">距2号线/4号线东七里站步行1268米</view>
        </view>
      </view>
      <view class="tit4 b">看房必读</view>
      <view class="con">
        <view class="item u-flex">
          <view class="lab">看房时间</view>
          <view>工作日晚上和周末</view>
        </view>
        <view class="item u-flex">
          <view class="lab">入住要求</view>
          <view>半年起租，租户稳定，无特殊要求</view>
        </view>
      </view>
    </view>
    <view class="bgff paddLR box2">
      <view class="tit4 b">房屋介绍</view>
      <view class="con">
        <u-parse :nodes="ruzhuxuzhi"></u-parse>
      </view>
    </view>
    <!-- 优惠券 -->
    <u-popup v-model="yhqShow" mode="bottom" border-radius="14" class="pup">
      <view class="u-p-20">
        <view class="tit u-text-center u-p-10">优惠提醒</view>
        <view class="u-flex u-col-center u-row-between">
          <text class="u-tips-color">红包</text>
          <view class="u-flex-1"></view>
          <u-button type="error" plain size="mini" class="custom-style">一键领取</u-button>
        </view>
        
        <scroll-view class="list u-m-t-30" style="height: calc(60vh - 100rpx);" :scroll-y="true">
          <view class="item u-m-b-20" v-for="item in 6">
            <view class="u-flex ">
              <view class="le u-m-l-10 u-text-center">
                <view class="u-flex u-text-bottom b u-error u-line-1">
                  <text class="u-font-20">￥</text>
                  <text class="u-font-40">16</text>
                </view>
                <view class="type u-m-t-6">最高5</view>
              </view>
              <view class="mid u-m-l-30 u-flex-1">
                <view class="ri b u-font-28rpx">优惠券名称</view>
                <view class="u-tips-color u-m-t-10 u-flex u-col-center u-row-between">
                  <text>有效期截至 2025</text>
                  <view class="btn u-flex u-col-center u-row-center" @click="yhqShow = false">去使用</view>
                </view>
              </view>
            </view>
            <view class="bot">
              仅用于带有【可用券】标签的酒店
            </view>
          </view>
        </scroll-view>
      </view>
    </u-popup>
    <!-- 筛选 -->
    <u-popup v-model="showShaix" mode="bottom" border-radius="14" class="shaix-pup">
      <view class="u-p-20">
        <view class="tit u-text-center u-p-10 re">产品筛选 <u-icon name="close" size="34" class="close ab" @click="colseShaix"></u-icon></view>
        <scroll-view class=" u-m-t-30" style="height: calc(60vh - 100rpx);" :scroll-y="true">
          <view v-for="(items, j) in shaix" :key="j" class="shaix-list">
            <view class="u-font-22 u-tips-color">{{items.name}}</view>
            <view class="u-flex u-col-center">
              <view v-for="(item, i) in items.list" :key="i" class="u-flex u-col-center u-row-center item" :class="[(item.checked && items.more || item.id === items.id && !items.more) ? 'on' :'']" @click="checbox(items.more, item, j, i)">{{item.name}}
                <view class="icon"><u-icon size="16" name="checkbox-mark"></u-icon></view>
              </view>
            </view>
          </view>
        </scroll-view>
        <view class="bottom">
          <view class="u-flex u-col-center u-row-between">
            <view class="u-font-34" @click="clearShaxi">清空</view>
            <u-button type="primary" class="submit-btn u-flex-1" @click="shaixSubmit()">确定</u-button>
          </view>
        </view>
      </view>
    </u-popup>
    <!-- 房间详情 -->
    <u-popup v-model="showRoom" mode="bottom" border-radius="14">
      <view class="room-pup">
        <view class="u-flex u-col-center u-row-between top">
          <view class="u-font-36 b">标准床型</view>
          <u-icon name="close" size="36"></u-icon>
        </view>
        <scroll-view scroll-y="true" style="max-height: calc(100vh - 500rpx);box-sizing: border-box;">
          <view class="u-p-l-30 u-p-r-30 u-p-b-40">
            <u-swiper :list="banner" height="400"></u-swiper>
            <view class="u-m-t-30">
              <view class="tit3">简介</view>
              <view class="u-p-b-20 u-666 z-line-15">的撒大苏打实打实阿斯顿撒打算的撒大苏打实打实阿斯顿撒打算的撒大苏打实打实阿斯顿撒打算的撒大苏打实打实阿斯顿撒打算的撒大苏打实打实阿斯顿撒打算的撒大苏打实打实阿斯顿撒打算的撒大苏打实打实阿斯顿撒打算的撒大苏打实打实阿斯顿撒打算的撒大苏打实打实阿斯顿撒打算</view>
            </view>
            <!-- 房型信息 -->
            <view class="u-m-t-30 info1">
              <view class="tit3">房型信息</view>
              <view class="u-flex u-col-center u-row-between u-flex-wrap">
                <view class="w5"><view class="lab">房<text class="w"></text>型：</view>一室一厅</view>
                <view class="w5"><view class="lab">面<text class="w"></text>积：</view>30平方米</view>
                <view class="w5"><view class="lab">床<text class="w"></text>型：</view>套房</view>
                <view class="w5"><view class="lab">楼<text class="w"></text>层：</view>11层</view>
                <view class="w5"><view class="lab">WIFI：</view>有</view>
                <view class="w5"><view class="lab">房<text class="w1"></text>间<text class="w1"></text>号：</view>1102</view>
                <view class="w5"><view class="lab">可住人数：</view>2人</view>
              </view>
            </view>
            <view class="line1"></view>
            <!-- 配套设施 -->
            <view class=" info2">
              <view class="tit3">配套设施</view>
              <view class="u-flex u-col-center u-row-between u-flex-wrap">
                <view class="w5">WIFI</view>
                <view class="w5">吹风机</view>
                <view class="w5">安全报警器</view>
                <view class="w5">寄存行李</view>
              </view>
            </view>
            <view class="line1"></view>
            <!-- 入住须知 -->
            <view class=" info2">
              <view class="tit3">入住须知</view>
              <u-parse :html="ruzhuxuzhi" class="u-666 z-line-15"></u-parse>
            </view>
          </view>
        </scroll-view>
        
      </view>
    </u-popup>
    
	</view>
</template>
<style lang="scss" scoped>
  page{background-color: #f5f5f5;}
  .box1{
    padding: 26rpx; margin-bottom: 16rpx;
    .line{width: 100%; height: 1px; background-color: #ededed; margin: 20rpx 0;}
    .line2{width: 1px; height: 40rpx; background-color: #ddd; margin: 0 16rpx;}
    .labs{
      .labItem{border: 1px solid #2979ff; padding: 0rpx 10rpx; line-height: 40rpx; border-radius: 4rpx; font-size: 20rpx; margin-right: 10rpx;}
    }
  }
  .box2{
    padding: 26rpx; margin-bottom: 16rpx;
    .map{width: 100%; height: 200rpx; background-color: #f5f5f5; margin-bottom: 20rpx;}
    .dt-list{
      margin-bottom: 50rpx;
      .item{margin-bottom: 10rpx;}
    }
    .con{
      .item{margin-bottom: 10rpx;}
    }
  }
  .tit4{font-size: 32rpx; margin-bottom: 20rpx;}
</style>
<script>
	export default {
		data() {
			return {
        ruzhuxuzhi:"的撒大苏打实打实阿斯顿撒打算的撒大苏打实打实阿斯顿撒打算的撒大苏打实打实阿斯顿撒打算<br>的撒大苏打实打实阿斯顿撒打算的撒大苏打实打实阿斯顿撒打算的撒大苏打实打实阿斯顿撒打算",
        showRoom:false, // 房型弹窗
        sheshi:[
          {id:1, name:'有浴缸',image: 'https://cdn.uviewui.com/uview/swiper/1.jpg'},
          {id:2, name:'寄存行李',image: 'https://cdn.uviewui.com/uview/swiper/1.jpg'},
          {id:3, name:'安全报警器',image: 'https://cdn.uviewui.com/uview/swiper/1.jpg'},
          {id:4, name:'WIFI',image: 'https://cdn.uviewui.com/uview/swiper/1.jpg'},
          {id:5, name:'有浴缸',image: 'https://cdn.uviewui.com/uview/swiper/1.jpg'},
          {id:6, name:'寄存行李',image: 'https://cdn.uviewui.com/uview/swiper/1.jpg'},
          {id:7, name:'安全报警器',image: 'https://cdn.uviewui.com/uview/swiper/1.jpg'},
          {id:4, name:'WIFI',image: 'https://cdn.uviewui.com/uview/swiper/1.jpg'},
        ],
        
        shaix:[
          {
            id:'',name:'床型',more:true,
            list:[{id:1, name:'大床', checked:false}, {id:2, name:'双床', checked:false}]
          },
          {
            id:'',name:'酒店服务',more:true,
            list:[{id:1, name:'立即确认', checked:false}, {id:2, name:'其他', checked:false}]
          },
          {
            id:'', name:'房型设施', more:true,
            list:[{id:1, name:'空调', checked:false}, {id:2, name:'吹风机', checked:false}, {id:3, name:'浴缸', checked:false}, {id:4, name:'wifi', checked:false}]
          },
          {
            id:'',name:'支付方式',more:false,
            list:[{id:1, name:'在线付'}, {id:2, name:'到店付'}]
          }
        ],
        
        banner: [
          {
            image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
            title: '昨夜星辰昨夜风，画楼西畔桂堂东',
            name:'劳斯莱斯酒店劳斯莱斯酒店劳斯莱斯酒店劳斯莱斯酒店劳斯莱斯酒店'
          },
          {
            image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
            title: '身无彩凤双飞翼，心有灵犀一点通',
            name:'支付宝哈罗酒店'
          },
          {
            image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
            title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳',
            name:'天天向上酒店'
          },{
            image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
            title: '昨夜星辰昨夜风，画楼西畔桂堂东',
            name:'劳斯莱斯酒店劳斯莱斯酒店劳斯莱斯酒店劳斯莱斯酒店劳斯莱斯酒店'
          },
          {
            image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
            title: '身无彩凤双飞翼，心有灵犀一点通',
            name:'支付宝哈罗酒店'
          },
          {
            image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
            title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳',
            name:'天天向上酒店'
          },
        ],
        fixed:false, // 是否吸顶
        showShaix:false, // 筛选下拉框
        
        dateRange:['2024-06-04','2024-06-06'], // 日期
        dateRangeObj:{s:'', sW:'', end:'', endW:''},
        disabledDate(item) {
          const val = new Date(item).getTime();
          const cur = Date.now() - 24*60*60*1000;
          if (val < cur) {
            return true
          }
          return false;
        }
			}
		},
    onReady(){
      this.getDayOfWeek(this.dateRange)
    },
    watch: {
      // watch第一次绑定值的时候不会执行监听，修改数据才会触发函数
      dateRange(newVal,oldVal) {
        console.log('oldVal:',oldVal)   // coderkey
        console.log('newVal:',newVal)   // pink
        this.getDayOfWeek(newVal)
      }
    },
		methods: {
      // 获取当前周几
      getDayOfWeek(dateRange) {
        var date1 = dateRange[0];
        var date2 = dateRange[1];
        const days = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
        var date11 = new Date(date1);
        var date22 = new Date(date2);
        this.dateRangeObj = {s:date1.substr(5,8), sW:days[date11.getDay()], end:date2.substr(5,8), endW:days[date22.getDay()], days:this.getDaysBetweenDates(dateRange)}
      },
      getDaysBetweenDates(dateRange) {
        var date1 = dateRange[0];
        var date2 = dateRange[1];
        // 将日期字符串转换为Date对象
        var d1 = new Date(date1);
        var d2 = new Date(date2);
        
        // 计算两个日期的时间差（毫秒）
        var timeDiff = Math.abs(d2.getTime() - d1.getTime());
        
        // 计算天数
        var days = Math.ceil(timeDiff / (1000 * 3600 * 24));
        
        return days;
      },
      // 打开日历
      openCancard(){
        this.$refs.calendar.open()
      },
      // 关闭筛选
      colseShaix(){
        this.showShaix = false;
        this.clearShaxi();
      },
      // 清楚筛选条件
      clearShaxi(){
        const shaix = JSON.parse(JSON.stringify(this.shaix))
        for(let i = 0; i < shaix.length; i++){
          shaix[i].id = '';
          for(let j = 0; j < shaix[i].list.length; j++){
            
            shaix[i].list[j].checked = false;
          }
        }
        this.shaix = shaix;
      },
      // 选中操作
      checbox(e,b, j, i){
        if(e){
          this.shaix[j].list[i].checked = !this.shaix[j].list[i].checked;
        }else{
          this.shaix[j].id = b.id
        }
      },
      // 添加搜索条件
      shaixSubmit(){
        console.log(this.shaix)
      },
      // 获取元素距离顶部的距离
      getElementTop() {
        var query = uni.createSelectorQuery().in(this);
        query.select('.my-element').boundingClientRect(data => {
          if (data) {
            // data.top就是元素距离顶部的距离
            console.log('元素距离顶部的距离:', data.top);
          }
        }).exec();
      },
      fixedTop(){
        console.log('1111')
        this.fixed = true
      },
      unfixedTop(){
        console.log('2222')
        this.fixed = false
      },
      fixedTop1(){
        console.log('3333')
        this.fixed = false
      },
      unfixedTop1(){
        console.log('444')
        this.fixed = true
      },
      
      // 展现优惠券
      getYhq(){
        this.yhqShow = !this.yhqShow
      },
      linkTo(e){
        uni.navigateTo({
          url:'/hotel/calendar'
        })
      }
		}
	}
</script>